<template>
  <div class="cantainer">
    <ul class="follow-list" v-if="followList.length">
      <li class="item space-between" v-for="item in followList" :key="item._id">
        <div class="left display-flex">
          <img :src="item.followeeId?.avatar_img" width="40" height="40" alt="头像" />
          <div class="content">
            <p class="name">{{ item.followeeId?.nikname }}</p>
            <p class="desc">{{ item.followeeId?.signature }}</p>
          </div>
        </div>
        <el-button class="right-btn" size="small" :type="item.followStatus === 1 ? 'success' : ''" @click="clickFollo"
          >关注</el-button
        >
      </li>
    </ul>
    <div class="box flex-center" v-else>
      <span>再接再厉</span>
    </div>
  </div>
</template>

<script>
import { getFollowList, followAuthor } from '@/api/action'
import { isUserLoggedIn } from '@/utils/auth'
import { mapGetters } from 'vuex'
export default {
  name: 'FollowList',
  data() {
    return {
      followList: []
    }
  },
  created() {
    this.getUserFollowList()
  },
  computed: {
    ...mapGetters(['user_id'])
  },
  methods: {
    async getUserFollowList() {
      try {
        console.log(this.$route)
        const res = await getFollowList({ authorId: this.authorId })
        console.log(res)
        if (res.code === 200) {
          this.followList = res.data
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 关注粉丝
    async clickFollow(id) {
      if (!isUserLoggedIn()) {
        this.$message.error({
          message: '请先登录',
          offset: 80
        })
        return false
      }
      try {
        const res = await followAuthor(id)
        if (res.code === 200) {
          if (res.data.follow === 1) {
            this.followCount += 1
            this.left_action.isfollow = 1
            this.$message.success({
              message: '关注成功',
              offset: 80
            })
          } else {
            if (this.followCount > 0) {
              this.followCount -= 1
              this.left_action.isfollow = 0
              this.$message.success({
                message: '取消关注成功',
                offset: 80
              })
            }
          }
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.follow-list {
  padding: 20px;
  background-color: #fff;
  .content {
    margin-left: 10px;
    .name {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
    .desc {
      font-size: 14px;
      color: #666;
    }
  }
  .el-button {
    width: 65px;
    height: 35px;
  }
}
.box {
  height: 100px;
  font-size: 20px;
  background-color: #fff;
}
</style>
